<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col class="el-card_body" :span="4" v-for="i in list" :key="i.pash">
        <el-card shadow="hover" class="hoverlist">
          <div class="box">
            <router-link :to="'/devices/' + i.path">
              <div class="iconstyle">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="i.icon"></use>
                </svg>
              </div>
              <div class="name">{{i.name}}</div>
            </router-link>
          </div>
        </el-card>
      </el-col>

      <!-- <el-col class="el-card_body" :span="4">
        <el-card  shadow="hover">
          <el-button type="text" @click="handleCreate">新增+</el-button>
        </el-card>
      </el-col>
      -->
    </el-row>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form label-width="100px" :model="Form" :rules="FormRules" ref="dataForm">
        <el-form-item label="设备类型" prop="deviceName" width="100%">
          <el-input v-model="Form.deviceName"></el-input>
        </el-form-item>
        <el-form-item label="路由地址" prop="path" width="100%">
          <el-input v-model="Form.path"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "保温箱", path: "incubatorList", icon: "#icon-box1" },
        { name: "冷藏车", path: "carList", icon: "#icon-truck" },
        { name: "冷库", path: "warehouseList", icon: "#icon-cargo-copy" }
      ],
      dialogStatus: "",
      textMap: {
        create: "新增设备类型"
      },
      dialogFormVisible: false,
      Form: {
        deviceName: "",
        path: ""
      },
      FormRules: {
        deviceName: [
          { required: true, message: "请输入设备类型", trigger: "blur" }
        ],
        path: [{ required: true, message: "请输入路由地址", trigger: "blur" }]
      }
    };
  },
  methods: {
    handleCreate() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-card_body {
  text-align: center;
}
.el-button {
  padding: 0;
}
.box {
  display: flex;
  .iconstyle {
    width: 60px;
    height: 60px;
    line-height: 76px;
    text-align: center;
    border-radius: 50%;
    background: #f7fcff;
    box-shadow: 2px 3px 6px #eee;
    float: left;
  }
  .name{
    display: inline-block;
    margin-left: 20px;
    line-height: 60px;
  }
}

.hoverlist:hover {
  background: #fefefe;
  transition: 0.3s;
}
</style>


